<template>
  <view class="home-module__course" :class="[datas.arrange == 3 ? 'course-scroll' : '']">
    <view class="course-header">
      <view class="title u-line-1">{{ datas.category_title || datas.title }}</view>
      <view v-if="datas.key == 'intentCourse'" class="intent-more" @click="goMore(datas.key)"
        ><u-icon name="more-dot-fill"></u-icon>
      </view>
      <view v-else class="more" @click="goMore(datas.source)"
        >更多<u-icon name="arrow-right"></u-icon>
      </view>
    </view>

    <!-- 最近直播 -->
    <template v-if="datas.list.length > 0">
      <template v-if="datas.source == 'lately_live'">
        <!-- 滚动 -->
        <view v-if="datas.arrange == 3" class="course-live scroll">
          <swiper
            :display-multiple-items="displayMultipleItems"
            next-margin="16px"
            class="course-swiper"
          >
            <swiper-item
              v-for="(item, index) in datas.list"
              :key="index"
              class="course-swiper-teim"
            >
              <view class="item" :class="[{ 'item-w': displayMultipleItems == 1 }]">
                <image
                  v-if="$edu.test.inArray(item.promotion_type, [1, 2, 3, 4])"
                  class="img-activity"
                  :src="liveEventIcon[item.promotion_type]"
                />
                <view class="avatar" @click="goCourse(item.id)">
                  <edu-image
                    :src="item.teacher_avatar"
                    width="100%"
                    height="100%"
                    border-radius="100%"
                  ></edu-image>
                  <view v-if="item.live_rate.status == 999" class="status">
                    <view class="playing">
                      <view class="playing__bar playing__bar1"></view>
                      <view class="playing__bar playing__bar2"></view>
                      <view class="playing__bar playing__bar3"></view>
                      <view class="playing__bar playing__bar4"></view>
                    </view>
                    直播中
                  </view>
                  <view class="time" v-else-if="datas.column != 2">
                    {{ item.start_time | date('mm月dd日 hh:MM') }}
                  </view>
                </view>
                <view class="content">
                  <view class="title" @click="goCourse(item.id)">{{ item.title }}</view>
                  <view class="mutable" v-if="datas.column == 2">
                    {{ item.start_time }}-{{ item.end_time }}
                  </view>
                  <view class="parallel">
                    <view class="name" v-if="datas.arrange == 1"
                      >讲师：{{ item.teacher_name }}</view
                    >
                    <view class="num">{{ item.sale_count }}人报名</view>
                    <view class="price" v-if="item.user_price > 0">
                      {{ item.user_price | formatCurrency }}
                    </view>
                    <view v-else class="free">免费</view>
                  </view>
                </view>
              </view>
            </swiper-item>
          </swiper>
        </view>

        <!-- 宫格/列表 -->
        <view v-else class="course-live" :class="[datas.arrange == 1 ? 'list' : 'gongge']">
          <view class="item" v-for="(item, index) in datas.list" :key="index">
            <image
              v-if="$edu.test.inArray(item.promotion_type, [1, 2, 3, 4])"
              class="img-activity"
              :src="liveEventIcon[item.promotion_type]"
            />
            <view class="avatar" @click="goCourse(item.id)">
              <edu-image
                :src="item.teacher_avatar"
                width="100%"
                height="100%"
                border-radius="100%"
              ></edu-image>
              <view v-if="item.live_rate.status == 999" class="status">
                <view class="playing">
                  <view class="playing__bar playing__bar1"></view>
                  <view class="playing__bar playing__bar2"></view>
                  <view class="playing__bar playing__bar3"></view>
                  <view class="playing__bar playing__bar4"></view>
                </view>
                直播中
              </view>
              <view class="time" v-else-if="datas.arrange != 1">
                {{ item.start_time | date('mm月dd日 hh:MM') }}
              </view>
            </view>
            <view class="content">
              <view class="title" @click="goCourse(item.id)">{{ item.title }}</view>
              <view class="mutable" v-if="datas.arrange == 1">
                {{ item.start_time | date('mm月dd日 hh:MM') }}
              </view>
              <view class="parallel">
                <view class="name" v-if="datas.arrange == 1">讲师：{{ item.teacher_name }}</view>
                <view class="num">{{ item.sale_count }}人报名</view>
                <view class="price" v-if="item.user_price > 0">
                  {{ item.user_price | formatCurrency }}
                </view>
                <view v-else class="free">免费</view>
              </view>
            </view>
          </view>
        </view>
      </template>

      <!-- 其他课程 -->
      <template v-else>
        <!-- 滚动 -->
        <view
          v-if="datas.arrange == 3"
          class="course-list scroll"
          :class="[datas.source || datas.key]"
        >
          <swiper
            :display-multiple-items="displayMultipleItems"
            next-margin="37px"
            class="course-swiper"
          >
            <swiper-item
              v-for="(item, index) in datas.list"
              :key="index"
              class="course-swiper-teim"
            >
              <view class="item" :class="[{ 'item-w': displayMultipleItems == 1 }]">
                <view class="picture">
                  <EduCourseImage
                    :image="item.cover_url"
                    :border-radius="16"
                    width="100%"
                    height="100%"
                    @click="goCourse(item.id)"
                  >
                    <template slot="tag">
                      <image
                        v-if="$edu.test.inArray(item.course_type, [1, 2, 3, 4])"
                        class="img-course"
                        :src="courseIcon[item.course_type]"
                      />
                    </template>
                    <template slot="promotion">
                      <image
                        v-if="$edu.test.inArray(item.promotion_type, [1, 2, 3, 4])"
                        class="img-promotion"
                        :class="[{ big: item.promotion_type == 1 }]"
                        :src="courseEventIcon[item.promotion_type]"
                      />
                    </template>
                    <!-- 直播时间 -->
                    <view v-if="item.course_type == 2 && item.start_time > 0" class="time">
                      {{ item.start_time | date('mm月dd日 hh:MM') }}
                    </view>
                  </EduCourseImage>
                </view>
                <view class="content">
                  <view class="title" @click="goCourse(item.id)">{{ item.title }}</view>

                  <view class="parallel">
                    <view v-if="datas.source != 'event'" class="num">
                      {{ item.sale_count }}人报名
                    </view>

                    <view class="free" v-if="item.is_buy">已购买</view>
                    <template v-else>
                      <view
                        v-if="
                          $edu.test.inArray(datas.source, ['hot', 'latest', 'splendid', 'custom'])
                        "
                        class="s-price"
                        >{{ item.scribing_price | formatCurrency }}</view
                      >
                      <view
                        class="price"
                        v-if="item.user_price > 0"
                        :class="[
                          {
                            font12: setPriceScale(item) > 9,
                          },
                        ]"
                      >
                        {{ item.user_price | formatCurrency }}
                      </view>
                      <view v-else class="free">免费</view>
                    </template>

                    <!-- 活动-立省 -->
                    <view v-if="datas.source == 'event'" class="save">
                      <u-image
                        width="4rpx"
                        height="5rpx"
                        src="@/static/images/home_activity_triangle_icon.png"
                        class="triangle"
                      ></u-image>
                      立省{{
                        ((item.user_price * 100 - item.promotion_price * 100) / 100)
                          | formatCurrency
                      }}
                    </view>
                  </view>

                  <!-- 活动-倒计时 -->
                  <count-down
                    v-if="datas.source == 'event' && item.promotion_running_status == 1"
                    :time="item.promotion_end_countdown"
                  ></count-down>
                </view>
              </view>
            </swiper-item>
          </swiper>
        </view>

        <!-- 宫格/列表 -->
        <view
          v-else
          :class="[datas.arrange == 1 ? 'list' : 'gongge', datas.source || datas.key]"
          class="course-list"
        >
          <view class="item" v-for="(item, index) in datas.list" :key="index">
            <view class="picture">
              <EduCourseImage
                :image="item.cover_url"
                :border-radius="16"
                width="100%"
                height="100%"
                @click="goCourse(item.id)"
              >
                <template slot="tag">
                  <image
                    v-if="$edu.test.inArray(item.course_type, [1, 2, 3, 4])"
                    class="img-course"
                    :src="courseIcon[item.course_type]"
                  />
                </template>
                <template slot="promotion">
                  <image
                    v-if="$edu.test.inArray(item.promotion_type, [1, 2, 3, 4])"
                    class="img-promotion"
                    :class="[{ big: item.promotion_type == 1 }]"
                    :src="courseEventIcon[item.promotion_type]"
                  />
                </template>
                <!-- 直播时间 -->
                <view v-if="item.course_type == 2 && item.start_time > 0" class="time">
                  {{ item.start_time | date('mm月dd日 hh:MM') }}
                </view>
              </EduCourseImage>
            </view>
            <view class="content">
              <view class="title" @click="goCourse(item.id)">{{ item.title }}</view>

              <!-- 活动-倒计时 -->
              <count-down
                v-if="
                  datas.source == 'event' &&
                  datas.arrange == 1 &&
                  item.promotion_running_status == 1
                "
                :time="item.promotion_end_countdown"
              ></count-down>

              <view class="parallel">
                <view v-if="datas.source != 'event'" class="num">{{ item.sale_count }}人报名</view>

                <view class="free" v-if="item.is_buy">已购买</view>
                <template v-else>
                  <view
                    v-if="
                      $edu.test.inArray(datas.source, ['hot', 'latest', 'splendid', 'custom']) &&
                      datas.arrange == 2
                    "
                    class="s-price"
                    >{{ item.scribing_price | formatCurrency }}</view
                  >
                  <template v-if="datas.source == 'free' && datas.arrange == 1">
                    <view class="btn" @click="goCourse(item.id)">加入学习</view>
                  </template>
                  <template v-else>
                    <view
                      class="price"
                      v-if="item.user_price > 0"
                      :class="[
                        {
                          font12: setPriceScale(item) > 9 && datas.arrange == 2,
                        },
                      ]"
                    >
                      {{ item.user_price | formatCurrency }}
                    </view>
                    <view v-else class="free">免费</view>
                  </template>
                </template>

                <!-- 活动-立省 -->
                <view v-if="datas.source == 'event'" class="save">
                  <u-image
                    width="4rpx"
                    height="5rpx"
                    src="@/static/images/home_activity_triangle_icon.png"
                    class="triangle"
                  ></u-image>
                  立省{{
                    ((item.user_price * 100 - item.promotion_price * 100) / 100) | formatCurrency
                  }}
                </view>
              </view>

              <!-- 活动-倒计时 -->
              <count-down
                v-if="
                  datas.source == 'event' &&
                  datas.arrange == 2 &&
                  item.promotion_running_status == 1
                "
                :time="item.promotion_end_countdown"
              ></count-down>
            </view>
          </view>
        </view>
      </template>
    </template>
  </view>
</template>

<script>
import EduCourseImage from '@/components/common/courseImage.vue'
import countDown from './countDown'
export default {
  name: 'Topic',
  components: {
    EduCourseImage,
    countDown,
  },
  props: {
    datas: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      liveEventIcon: {
        1: require('@/static/images/live_discount_icon@2x.png'),
        2: require('@/static/images/live_miaosha_icon@2x.png'),
        3: require('@/static/images/live_kanjia_icon@2x.png'),
        4: require('@/static/images/live_pintuan_icon@2x.png'),
      },
      courseEventIcon: {
        1: require('@/static/images/course_discount_icon@2x.png'),
        2: require('@/static/images/course_miaosha_icon@2x.png'),
        3: require('@/static/images/course_kanjia_icon@2x.png'),
        4: require('@/static/images/course_pintuan_icon@2x.png'),
      },
      courseIcon: {
        1: require('@/static/images/dianbocourse_icon@2x.png'),
        2: require('@/static/images/livecourse_icon@2x.png'),
        3: require('@/static/images/facecourse_icon@2x.png'),
        4: require('@/static/images/classcourse_icon@2x.png'),
      },
    }
  },
  computed: {
    displayMultipleItems() {
      if (this.datas.list.length < 2) return 1
      return 2
    },
  },
  methods: {
    // 跳转更多
    goMore(key) {
      let query = {}
      if (key == 'hot') {
        query = {
          order: 'popular',
        }
      } else if (this.$edu.test.inArray(key, ['splendid', 'latest'])) {
        query = {
          order: key,
        }
      } else if (this.$edu.test.inArray(key, ['free', 'event'])) {
        query = {
          param: key,
        }
      } else if (key == 'lately_live') {
        query = {
          type: 2,
        }
      } else if (key == 'custom') {
        query = {
          order: 'latest',
        }
      }
      if (key == 'intentCourse') {
        this.$emit('click')
      } else {
        this.$u.route('/pageCourse/course/list', query)
      }
    },
    // 跳转课程
    goCourse(id) {
      if (id == 0) return
      this.$u.route('/pageCourse/course/details', {
        id: id,
      })
    },
    // 价格太长字体缩小
    setPriceScale(item) {
      let save = (item.scribing_price * 100 - item.user_price * 100) / 100
      let pricelength = item.user_price.toString().length
      return save.toString().length + pricelength
    },
    getFormateDate(timestamp) {
      let now = new Date() // 当前
      if (timestamp.toString().length == 10) timestamp *= 1000
      let date = new Date(timestamp)
      const nextDate = function (date, amount = 1) {
        return new Date(date.getFullYear(), date.getMonth(), date.getDate() + amount)
      }
      // 当前年
      if (now.getFullYear() == date.getFullYear()) {
        if (this.$u.date(now) == this.$u.date(date)) {
          return this.$u.date(timestamp, '今天hh:MM')
        } else if (this.$u.date(nextDate(now)) == this.$u.date(date)) {
          return this.$u.date(timestamp, '明天hh:MM')
        } else {
          return this.$u.date(timestamp, 'mm月dd日 hh:MM')
        }
      } else {
        return this.$u.date(timestamp, 'yyyy年mm月dd日 hh:MM')
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.home-module__course {
  margin-bottom: 56rpx;
  .course-header {
    padding: 0 30rpx;
    display: flex;
    align-items: center;

    .title {
      font-size: 34rpx;
      font-weight: bold;
      color: $edu-main-color;
      line-height: 48rpx;
      flex: 1;
      min-width: 0;
      margin-right: 30rpx;
    }

    .intent-more {
      font-size: 40rpx;
      font-weight: 400;
      color: #606266;
    }

    .more {
      font-size: 24rpx;
      font-weight: 400;
      color: #888888;
      line-height: 34rpx;
    }
  }
  .course-live {
    margin-top: 32rpx;
    .item {
      position: relative;
      .avatar {
        position: relative;
        .status,
        .time {
          padding: 4rpx 8rpx;
          font-size: 20rpx;
          font-weight: 400;
          line-height: 28rpx;
          border-radius: 8rpx;
          position: absolute;
          left: 50%;
          bottom: -16rpx;
          transform: translateX(-50%);
          white-space: nowrap;
        }
        .status {
          color: #ffffff;
          background: #67c23a;
          display: flex;
          align-items: center;
          .playing {
            width: 16rpx;
            height: 17rpx;
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            margin-right: 6rpx;
            .playing__bar {
              width: 3rpx;
              height: 100%;
              background: #ffffff;
              animation: up-and-down 1.3s ease infinite alternate;
            }
            .playing__bar1 {
              height: 60%;
            }
            .playing__bar2 {
              height: 30%;
              animation-delay: -2.4s;
            }
            .playing__bar3 {
              height: 75%;
              animation-delay: -3.7s;
            }
            .playing__bar4 {
              height: 45%;
              animation-delay: -4.8s;
            }
          }
        }
        .time {
          color: $edu-main-color;
          background: #f2f2f2;
        }
      }
      .content {
        .title {
          font-size: 28rpx;
          font-weight: 500;
          color: $edu-main-color;
          line-height: 36rpx;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .mutable {
          padding: 8rpx 18rpx;
          margin-top: 16rpx;
          font-size: 22rrpx;
          font-weight: 400;
          color: $edu-main-color;
          line-height: 32rpx;
          background: #f7f7f7;
          border-radius: 27rpx;
          display: inline-block;
        }
        .parallel {
          display: flex;
          align-items: center;
          .name,
          .num {
            font-size: 24rpx;
            font-weight: 400;
            color: $edu-tips-color;
          }
          .price {
            font-size: 32rpx;
            font-weight: 500;
            color: $edu-price-color;
          }
          .free {
            font-size: 30rpx;
            font-weight: 500;
            color: $edu-free-color;
          }
        }
      }
      .img-activity {
        position: absolute;
        right: 0;
        top: 0;
      }
    }
    &.list {
      display: grid;
      grid-row-gap: 20rpx;
      padding: 0 30rpx;
      .item {
        grid-column: span 1 / span 1;
        padding: 40rpx 28rpx;
        box-shadow: 0rpx 0rpx 40rpx 0rpx rgba(48, 49, 51, 0.06);
        border-radius: 16rpx;
        display: flex;
        align-items: center;
        .avatar {
          width: 120rpx;
          height: 120rpx;
        }
        .content {
          flex: 1;
          min-width: 0;
          margin-left: 24rpx;
          .parallel {
            margin-top: 12rpx;
            .name {
              overflow: hidden;
              word-break: break-all;
              text-overflow: ellipsis;
              display: -webkit-box; // 弹性伸缩盒
              -webkit-box-orient: vertical; // 设置伸缩盒子元素排列方式
              -webkit-line-clamp: 1;
              margin-right: 34rpx;
            }
            .num {
              white-space: nowrap;
              margin-right: 20rpx;
            }
            .price,
            .free {
              margin-left: auto;
              white-space: nowrap;
            }
          }
        }
      }
    }
    &.gongge {
      padding: 0 30rpx;
      display: grid;
      grid-gap: 28rpx 22rpx;
      grid-template-columns: repeat(2, minmax(0px, 1fr));
      .item {
        padding: 32rpx 26rpx;
        grid-column: span 1 / span 1;
        box-shadow: 0rpx 0rpx 40rpx 0rpx rgba(48, 49, 51, 0.06);
        border-radius: 16rpx;
        .avatar {
          width: 170rpx;
          height: 170rpx;
          margin: 0 auto;
        }
        .content {
          margin-top: 42rpx;
          .parallel {
            margin-top: 16rpx;
            .price,
            .free {
              margin-left: auto;
            }
          }
        }
      }
    }
    &.scroll {
      margin-top: 0;
      padding-left: 20rpx;
      .course-swiper {
        height: 400rpx;
      }
      .course-swiper-teim {
        padding-top: 32rpx;
        padding-bottom: 32rpx;
        box-sizing: border-box;
      }
      .item {
        height: 336rpx;
        background: #ffffff;
        box-shadow: 0rpx 0rpx 40rpx 0rpx rgba(48, 49, 51, 0.06);
        border-radius: 16rpx;
        margin: 0 10rpx;
        padding: 32rpx 26rpx 0;
        &.item-w {
          width: 334rpx;
        }
        .avatar {
          width: 170rpx;
          height: 170rpx;
          margin: 0 auto;
        }
        .content {
          margin-top: 42rpx;
          .parallel {
            margin-top: 16rpx;
            .price,
            .free {
              margin-left: auto;
            }
          }
        }
      }
    }
  }
  .course-list {
    margin-top: 32rpx;
    .item {
      .picture {
        .time {
          padding: 0 8rpx;
          height: 32rpx;
          font-size: 20rpx;
          color: #ffffff;
          line-height: 32rpx;
          background: rgba(48, 49, 51, 0.4);
          border-radius: 8rpx;
          position: absolute;
          bottom: 8rpx;
          left: 8rpx;
        }
        .img-promotion {
          position: absolute;
          right: 0;
          bottom: 0;
          width: 30px;
          height: 16px;
          &.big {
            width: 50px;
          }
        }
        .img-course {
          position: absolute;
          top: 0;
          left: 0;
          width: 28px;
          height: 16px;
        }
      }
      .content {
        .title {
          font-size: 28rpx;
          color: #333333;
          font-weight: 500;
          line-height: 40rpx;
        }
        .parallel {
          display: flex;
          align-items: center;
          .num {
            flex: 1;
            min-width: 0;
            font-size: 22rpx;
            font-weight: 400;
            color: $edu-tips-color;
          }
          .save {
            margin-left: 10rpx;
            padding: 6rpx 8rpx;
            font-size: 20rpx;
            font-weight: 400;
            color: $edu-price-color;
            line-height: 30rpx;
            background: #fff5f4;
            border-radius: 8rpx;
            position: relative;
            .triangle {
              position: absolute;
              top: 50%;
              margin-top: -2rpx;
              left: -5rpx;
            }
          }
          .s-price {
            font-size: 22rpx;
            font-weight: 400;
            color: #888888;
            line-height: 26rpx;
            text-decoration: line-through;
            margin-right: 5px;
          }
          .price {
            font-size: 32rpx;
            font-weight: 500;
            color: $edu-price-color;
            &.font12 {
              font-size: 24rpx;
            }
          }
          .free {
            font-size: 30rpx;
            font-weight: 500;
            color: $edu-free-color;
          }
          .btn {
            width: 148rpx;
            height: 52rpx;
            font-size: 26rpx;
            font-weight: 400;
            color: #ffffff;
            line-height: 52rpx;
            text-align: center;
            border-radius: 28rpx;
            @include bg-color();
          }
        }
      }
    }
    &.list {
      display: grid;
      &.event {
        padding: 0 30rpx;
        grid-row-gap: 20rpx;
        .item {
          grid-column: span 1 / span 1;
          padding: 22rpx;
          background: #ffffff;
          box-shadow: 0rpx 0rpx 40rpx 0rpx rgba(48, 49, 51, 0.06);
          border-radius: 20rpx;
          .title {
            max-width: 340rpx;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
        }
      }
      &.latest,
      &.splendid,
      &.hot,
      &.free,
      &.custom,
      &.intentCourse {
        margin-left: 30rpx;
        margin-right: 30rpx;
        padding: 28rpx 22rpx 40rpx;
        grid-row-gap: 28rpx;
        background: #ffffff;
        box-shadow: 0rpx 0rpx 40rpx 0rpx rgba(48, 49, 51, 0.06);
        border-radius: 16rpx;
        .item {
          .content {
            .title {
              overflow: hidden;
              word-break: break-all;
              text-overflow: ellipsis;
              display: -webkit-box; // 弹性伸缩盒
              -webkit-box-orient: vertical; // 设置伸缩盒子元素排列方式
              -webkit-line-clamp: 2;
            }
          }
        }
      }
      .item {
        grid-column: span 1 / span 1;
        display: flex;
        .picture {
          width: 280rpx;
          height: 156rpx;
        }
        .content {
          margin-left: 24rpx;
          flex: 1;
          min-width: 0;
          display: flex;
          flex-direction: column;

          .parallel {
            margin-top: auto;
          }
        }
      }
    }
    &.gongge {
      display: grid;
      grid-gap: 28rpx 22rpx;
      grid-template-columns: repeat(2, minmax(0px, 1fr));
      &.event {
        padding: 0 30rpx;
        .item {
          grid-column: span 1 / span 1;
          padding-bottom: 24rpx;
          background: #ffffff;
          box-shadow: 0rpx 0rpx 40rpx 0rpx rgba(48, 49, 51, 0.06);
          border-radius: 20rpx;
          .picture {
            width: 100%;
            height: 187rpx;
          }
          .content {
            margin-top: 18rpx;
            padding: 0 16rpx;
            .title {
              height: 80rpx;
              overflow: hidden;
              word-break: break-all;
              text-overflow: ellipsis;
              display: -webkit-box; // 弹性伸缩盒
              -webkit-box-orient: vertical; // 设置伸缩盒子元素排列方式
              -webkit-line-clamp: 2;
            }
            .parallel {
              margin-top: 16rpx;
            }
          }
        }
      }
      &.latest,
      &.splendid,
      &.hot,
      &.free,
      &.custom,
      &.intentCourse {
        margin-left: 30rpx;
        margin-right: 30rpx;
        padding: 22rpx 22rpx 32rpx;
        background: #ffffff;
        box-shadow: 0rpx 0rpx 40rpx 0rpx rgba(48, 49, 51, 0.06);
        border-radius: 16rpx;
        .item {
          grid-column: span 1 / span 1;
          .picture {
            width: 100%;
            height: 172rpx;
          }
          .content {
            margin-top: 16rpx;
            .title {
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
            .parallel {
              margin-top: 18rpx;
            }
          }
        }
      }
    }
    &.scroll {
      margin-top: 0;
      padding-left: 20rpx;
      &.event {
        .course-swiper {
          height: 428rpx;
        }
        .course-swiper-teim {
          padding-top: 32rpx;
          padding-bottom: 10rpx;
          box-sizing: border-box;
        }
        .item {
          height: 386rpx;
          background: #ffffff;
          box-shadow: 0rpx 0rpx 40rpx 0rpx rgba(48, 49, 51, 0.06);
          border-radius: 20rpx;
          margin: 0 10rpx;
          &.item-w {
            width: 308rpx;
          }
          .picture {
            width: 100%;
            height: 174rpx;
          }
          .content {
            margin-top: 16rpx;
            padding: 0 16rpx;
            .title {
              line-height: 36rpx;
              height: 72rpx;
              overflow: hidden;
              word-break: break-all;
              text-overflow: ellipsis;
              display: -webkit-box; // 弹性伸缩盒
              -webkit-box-orient: vertical; // 设置伸缩盒子元素排列方式
              -webkit-line-clamp: 2;
            }
            .parallel {
              margin-top: 16rpx;
            }
          }
        }
      }
      &.latest,
      &.splendid,
      &.hot,
      &.free,
      &.custom,
      &.intentCourse {
        .course-swiper-teim {
          padding-top: 32rpx;
          box-sizing: border-box;
        }
        .item {
          margin: 0 10rpx;
          .picture {
            width: 100%;
            height: 172rpx;
          }
          .content {
            margin-top: 16rpx;
            .title {
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
            .parallel {
              margin-top: 18rpx;
            }
          }
        }
      }
      &.latest,
      &.splendid,
      &.hot,
      &.free,
      &.custom {
        .course-swiper {
          height: 318rpx;
        }
      }
      &.intentCourse {
        .course-swiper {
          height: 318rpx;
        }
      }
    }
  }
  // 推荐
  &.recommend-template {
    .course-header {
      border-left: none;
      .title {
        font-size: 26px;
        line-height: 34px;
      }
      .more {
        width: 66px;
        height: 26px;
        line-height: 26px;
        text-align: center;
        background: #ffffff;
        border-radius: 16px;
        // @include edu-color-primary;
      }
    }
    .course-list {
      background: #ffffff;
      border-radius: 6px;
      margin-left: 15px;
      margin-right: 15px;
      &.gongge {
        padding-top: 18px;
        padding-bottom: 18px;
        &.col-2 {
          grid-gap: 18px 28px;
        }
      }
      &.scroll {
        padding: 30px 40px;
        .swiper-button-prev,
        .swiper-button-next {
          margin-top: 20px;
        }
      }
    }
  }
}
@keyframes up-and-down {
  10% {
    height: 30%;
  }
  30% {
    height: 100%;
  }
  60% {
    height: 50%;
  }
  80% {
    height: 75%;
  }
  100% {
    height: 20%;
  }
}
</style>
